<template>
  <div class="user-comments">
    <div class="wrapper">
      <h2 class="title">他们正在使用</h2>
      <div class="comments">
        {{ comments[active].title }}
      </div>
      <div class="users">
        <div
          class="user"
          :class="{ active: active === idx }"
          v-for="(comment, idx) in comments"
          :key="comment.id"
          @click="active = idx"
        >
          <div class="user-tx">
            <img class="tx" :src="comment.pic" alt="" />
          </div>
          <div class="detail">
            <div class="name">{{ comment.name }}</div>
            <div class="corp">{{ comment.corp }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      comments: [
        {
          id: 1,
          title:
            '我们的问卷投放量很大，每次问卷调查都是一次品牌形象宣传，因此除了问卷功能，更注重系统环境的稳定性。在评估后，我们决定选择腾讯问卷，事实证明百万的问卷数据承载毫无压力，可靠！',
          name: 'Thomas',
          corp: '小米路由器',
          pic: 'https://wj.qq.com/image/avatar_thomas.png',
        },
        {
          id: 2,
          title:
            '腾讯问卷提供的调查问卷模板可订制化服务，增加了页面趣味性，降低了用户点击成本，问卷的回收率简单轻松翻倍，还收获了不少用户的好评。',
          name: '315晚会',
          corp: '中央电视台',
          pic: 'https://wj.qq.com/image/avatar_cctv.png',
        },
        {
          id: 3,
          title:
            '界面简洁轻量，QQ登录即可免费使用，问卷发布快捷方便，再也不用人工处理问卷数据，大大节省了调研成本，是很赞的自助式在线问卷调查服务的平台！',
          name: '火车票调查',
          corp: '同程网',
          pic: 'https://wj.qq.com/image/avatar_tongcheng.png',
        },
        {
          id: 4,
          title:
            '腾讯问卷在编辑方式上更加灵活高效，不同用户环境下的交互体验更友好，前端稳定性、安全性表现尤为优异，为海量车主调研项目提供了可靠的基础支撑，用起来更踏实！',
          name: '滴滴代驾',
          corp: '滴滴',
          pic: 'https://wj.qq.com/image/avatar_didi.png',
        },
        {
          id: 5,
          title:
            '腾讯问卷的扁平化设计做得很好，交互设计的体验也很棒，在对比多个平台后选择使用腾讯问卷，帮我轻轻松松完成了调研！',
          name: '链家网',
          corp: '链家',
          pic: 'https://wj.qq.com/image/avatar_lianjia.png',
        },
      ],
    };
  },
};
</script>

<style scoped>
.user-comments {
  background-color: #fafafa;
}

.wrapper {
  width: 1000px;
  padding: 0 20px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 47px;
}

.wrapper .title {
  font-weight: normal;
}

.title {
  font-size: 20px;
  color: #999;
  padding-top: 35px;
}

.comments {
  width: 1000px;
  height: 80px;
  margin-top: 20px;
  text-align: left;
  padding-bottom: 30px;
}

.users {
  width: 960px;
  padding: 0 19px;
  border-top: 1px solid rgb(221, 221, 221);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user {
  width: 150px;
  height: 112px;
  display: flex;
  align-items: center;
  position: relative;
  opacity: .5;
}

.user.active {
  opacity: 1;
}

.user:hover::before,
.user.active::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 3px;
  background-color: #58a6e7;
  position: absolute;
  top: -2px;
  left: 0;
}

.tx {
  width: 50px;
  height: 50px;
}

.detail {
  height: 112px;
  text-align: left;
  margin-top: 62px;
  margin-left: 10px;
  font-size: 14px;
}

.name {
  color: #333;
}

.corp {
  color: #999;
}
</style>
